<template>
	<w-container class="rank" :loading="loading||isNotReady">
		<w-navbar leftIcon="back-btn-white" title="" :placeholder="false">
			<view slot="center">
				<view class="tabs-box flex flex-ai-center">
					<view @tap="search.type = item.type" v-for="(item,index) in tabsList" :key="index" class="item" :class="item.type == search.type?'active':''">{{ item.name }}</view>
				</view>
			</view>
		</w-navbar>
		<view class="top">
			<!-- <w-image src='/static/bg/dragonTigerList1.png' width="375" mode="widthFix"></w-image> -->
			<HeaderList :search="search" :items="dataList[search.type == 1?'rank1':'rank2']" />
		</view>

		<!-- <view class="plr-16 pt-12 flex flex-ai-center flex-js-sb" @click="$u.route('/pages/rank/masterRank')">
			<view class="font-color-white font-size-18">
				大师动态
			</view>
			<u-icon name="arrow-right" color='#fff' size='16'></u-icon>
		</view> -->
		<!-- <scroll-view class="mt-12" style="height: 208rpx;" scroll-y="true">
			<view class="plr-16">
				<u-steps direction="column" dot>
					<u-steps-item v-for="item in dataList.list" @click.native='toView({id:item.user_id})'>
						<view class="" slot='desc'>
							<view class="flex flex-ai-center">
								<u-avatar size='64rpx' :src="item.avatar"></u-avatar>
								<text class="font-color-white font-size-16 pl-8  text-overflow"
									style="flex:1 0;">{{item.nickname}}</text>
								<text class="font-color-999 font-size-12">{{item.createtime|formatDate}}</text>
							</view>
							<view class="ptb-8 plr-12 mt-10 br-8 font-size-14 font-color-white flex flex-ai-center"
								style="background-color:#232020 ;">
								<w-image :src="item.goods_cover_image" radius="4" width='45'
									height="45"></w-image>
								<text class=" plr-10  text-overflow" style="flex:1 0;">{{item.goods_name}}</text>
								<text>x{{item.num}}</text>
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
		</scroll-view> -->
		
		<!-- <swiper v-if="dataList.list.length" :indicator-dots="false" :autoplay="true"  :interval="4000" :vertical='true' :duration="1000">
			<swiper-item v-for="item in dataList.list" :key="item.id" @click.native='toView({id:item.user_id})'>
				<view class="pa-16">
					<view class="flex flex-ai-center">
						<u-avatar size='64rpx' :src="$ossUrl+item.avatar"></u-avatar>
						<text class="font-color-white font-size-16 pl-8  text-overflow"
							style="flex:1 0;">{{item.nickname}}</text>
						<text class="font-color-describe font-size-12">{{item.createtime|formatDate}}</text>
					</view>
					<view class="ptb-8 plr-12 mt-10 br-8 font-size-14 font-color-white flex flex-ai-center"
						style="background-color:#232020;">
						<w-image :src="item.goods_cover_image" radius="4" width='45'
							height="45"></w-image>
						<text class=" plr-10  text-overflow" style="flex:1 0;">{{item.goods_name}}</text>
						<text>x{{item.num}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		<w-loading v-else type="empty" emptyType="search" emptyTop="20" emptyBottom="20"></w-loading>

		<view class="mlr-16 flex flex-ai-end type-container  br-t-12">
			<view class="flex-1 text-center type-item left" :class="{active:search.type==1}" @click="changeType(1)">
				功成名就
			</view>
			<view class="flex-1 text-center type-item right" :class="{active:search.type==2}" @click="changeType(2)">
				龙争虎斗
			</view>
		</view> -->
		<view class=" pt-12 rank-list ">
			<view class="title">
				榜单每5分钟刷新
			</view> 
			<view class="flex table-hd">
				<view class="order">
					排名
				</view>
				<view class="user">
					用户
				</view>
				<view class="value">
					{{search.type==1? '成就值':"市场影响力"}}
					<w-icon class="ml-10" name="q" @click='showTips=!showTips'></w-icon>
					<w-image class="tips" v-if="showTips&&search.type==1" src='/static/bg/rank-tip.png' width="218"
						height="162"></w-image>
					<w-image class="tips" v-if="showTips&&search.type==2" src='/static/bg/rank-tip-2.png' width="218"
						height="128"></w-image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="table-container">
				<view>
					<view class="rank-item flex" v-for="(item,i) in rank" :key="item.id">
						<view class="order flex-center flex">
							<!-- <w-image v-if="i+1<4" :src="`/static/bg/rank-${i+1}.png`" width="32" height="25"></w-image>
							<text v-else>{{i+1}}</text> -->
							<text class="font-color-white">{{i+4}}</text>
							<w-icon class="ml-12" v-if="Math.abs(item.is_up)&&item.is_up>0" size="6" name="up-icon"></w-icon>
							<w-icon class="ml-12" v-if="Math.abs(item.is_up)&&item.is_up<0" size="6" name="down-icon"></w-icon>
							<text  v-if="Math.abs(item.is_up)" class="font-size-10  ml-2" :class="{'font-color-success':item.is_up<0,'font-color-warning':item.is_up>0}">{{Math.abs(item.is_up)}}</text>
						</view>
						<view class="user flex flex-ai-center">
							<u-avatar :src="$ossUrl+item.avatar" size='72rpx'></u-avatar>
							<view class="pl-12 flex flex-dir-col flex-ai-start">
								<text class="font-size-12 font-color-white text-left text-overflow"
									style="max-width: 150rpx;">{{item.nickname}}</text>
								<w-image :src="item.listimg" width="75" height="26"></w-image>
							</view>
						</view>
						<view class="value flex flex-ai-center" v-if="!item.view" @click="targetView(item)">
							<w-icon name="value" v-show="search.type==1"></w-icon>
							<w-icon name="hot" v-show="search.type==2"></w-icon>
							<text class=" font-size-20" style="color: #FFD5A8;">{{item.price}}</text>
						</view>
						<view class="value flex flex-ai-center" v-else @click="toView(item)">
							<w-image src='/static/bg/view-buy.png' width="75" mode="widthFix"></w-image>
						</view>
					</view>
					<w-loading v-if="!rank.length" type="empty" emptyType="search" emptyTop="20" emptyBottom="20"></w-loading>
				</view>
			</scroll-view>
		</view>
		<bottomList :items="dataList.headUser" />
		<view v-if="my" class="footer flex flex-ai-center flex-js-sb">
			<view  class="font-color-white">
				{{my.myrank}}
			</view>
			<view class="flex flex-ai-center font-size-12 font-color-white">
				<u-avatar :src='userInfo.avatar' size='72rpx'></u-avatar>
				<text class="ml-8">{{userInfo.nickname}}</text>
			</view>
			<view class="flex flex-dir-col flex-ai-center font-size-12 font-color-white">
				<view class="flex flex-ai-center">
					<w-icon name="value" v-show="search.type==1"></w-icon>
					<w-icon name="hot1" v-show="search.type==2"></w-icon>
					{{my.price}}
				</view>
				<view class="flex flex-ai-center">
					距离上榜还差
					<w-icon name="value" v-show="search.type==1"></w-icon>
					<w-icon name="hot1" v-show="search.type==2"></w-icon>
					{{my.last}}
				</view>
			</view>
		</view>
	</w-container>
</template>

<script>
	import {
		getRank
	} from '@/api/common/index.js'
	import HeaderList from './components/HeaderList.vue'
	import bottomList from './components/bottomList.vue'
	export default {
		components: {
			HeaderList,
			bottomList
		},
		data() {
			return {
				// tabsList:['操盘专家','买入大亨'],
				tabsList:[
					{
						name:'操盘专家',
						type:2
					},
					{
						name:'买入大亨',
						type:1
					}
				],
				showTips: false,
				scrollLeft: 0,
				loading: true,
				isNotReady: true,
				avatarWidth: 0,
				dataList: {
					headUser: [],
					list: [],
					rank1: [],
					rank2: [],
					my1: {},
					my2: {}
				},

				timer: null,
				search: {
					type: 2
				}
			}
		},
		computed: {
			rank() {
				if (this.search.type == 1) {
					return this.dataList.rank1.slice(3)
				}
				return this.dataList.rank2.slice(3)
			},
			my() {
				if (this.search.type == 1) {
					return this.dataList.my1
				}
				return this.dataList.my2
			}
		},
		onLoad() {
			this.getList()
		},
		onReady() {
			this.isNotReady = false
		},
		onPullDownRefresh() {
			this.getList()
		},
		methods: {
			targetView(item) {
				if (this.search.type == 1) {
					this.dataList.rank1.map((v,i)=>{
						this.$set(this.dataList.rank1[i],'view',item.id==v.id)
					})
					
				}else{
					this.dataList.rank2.map((v,i)=>{
						this.$set(this.dataList.rank2[i],'view',item.id==v.id)
					})
				}
				this.$forceUpdate()
			},
			toView(item){
				uni.navigateTo({
					url:'/pages/rank/userBuy?id='+item.id
				})
			},
			changeType(v) {
				this.search.type = v;
			},
			getList() {
				this.loading=true
				getRank().then(res => {
					this.loading = false;
					this.dataList = res.data;
					this.dataList.rank1 = this.dataList.rank1.map(v => {
						v.view = false
						return v
					})
					this.dataList.rank2 = this.dataList.rank2.map(v => {
						v.view = false
						return v
					})
				}).finally(()=>{
					uni.stopPullDownRefresh()
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ uni-swiper{
		height: 240rpx;
	}
	.tabs-box {
		width: 444rpx;
		height: 54rpx;
		background: rgba(255,255,255,0.1);
		border-radius: 60rpx;
		border: 1px solid rgba(255,255,255,0.1);
		.item {
			width: 50%;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: 32rpx;
			color:#999;
		}
		.active {
			background: #FFFFFF;	
			border-radius:60rpx;
			color: #000;
			transition: all 0.3s; 
		}
	}
	.rank {
		background-color: #111727;
		background-image: url($IMG_URL + '/static/bg/dragonTigerList1.png');
		background-size: 100% auto;
		background-repeat: no-repeat;

		/deep/ .u-steps-item__wrapper {
			background-color: unset;
		}

		/deep/ .u-steps-item__line {
			background-color: white !important;
		}

		/deep/ .u-steps-item__wrapper__dot {
			background-color: white !important;
		}

		/deep/ .u-steps-item__line--column {
			top: 20rpx;
		}
		
		

		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));

		.footer {
			background: linear-gradient( 90deg, #FF7F43 0%, #FF2D23 100%);
			padding: 44rpx 36rpx;
			padding-top: 44rpx;
			// padding-bottom: 44rpx;
			@extend .plr-18;
			padding-bottom: calc(44rpx + env(safe-area-inset-bottom));
			position: fixed;
			bottom: 0;
			width: 750rpx;
			left: 0;
		}

		.rank-list {
			// transform: translateY(-26rpx);
			background-color: #111727;

			>.title {
				width: 278rpx;
				height: 56rpx;
				background: linear-gradient( 90deg, #FF7F43 0%, #FF2D23 100%);
				border-radius: 38rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				@extend .flex, .flex-center;
				margin: 0 auto;
			}

			.table-container {
				max-height: calc(455 * 2rpx);
			}

			.table-hd {
				padding: 6rpx 0;
				margin-top: 15rpx;
				@extend .font-color-white, .font-size-14;

				.value {
					position: relative;

					.tips {
						position: absolute;
						top: 40rpx;
						right: 8rpx;
						z-index: 2;
					}
				}
			}

			.order {
				width: 182rpx;
				text-align: center;
			}

			.user {
				width: 252rpx;
				text-align: center;
			}

			.value {
				@extend .flex, .flex-center, .flex-1;

			}

			.rank-item {
				height: 144rpx;
			}
		}

		.type-container {
			// background: linear-gradient(180deg, #292A3F 0%, #03031D 100%);
			background:#997E7E;
			margin-top: 54rpx;

			.type-item {
				padding-top: 18rpx;
				padding-bottom: 50rpx;
				color: #CECECE;
				font-size: 28rpx;
				position: relative;
			}

			.type-item.active.left {
				&::after {
					box-sizing: border-box;
					content: "功成名就";
					position: absolute;
					width: 351rpx;
					height: 122rpx;
					@extend .flex, .flex-js-center, .pt-12, .font-color-white, .font-size-16;
					bottom: 0;
					left: 0;
					font-weight: 800;
					background-image: url($IMG_URL+'/static/bg/rank-left-active.png');
					background-size: 351rpx 122rpx;
				}
			}

			.type-item.active.right {
				padding-top: 18rpx;
				padding-bottom: 24rpx;
				color: #CECECE;
				font-size: 28rpx;
				position: relative;

				&::after {
					box-sizing: border-box;
					content: "龙争虎斗";
					position: absolute;
					width: 351rpx;
					height: 122rpx;
					font-weight: 800;
					@extend .flex, .flex-js-center, .pt-12, .font-color-white, .font-size-16;
					bottom: 0;
					left: 0;
					background-image: url($IMG_URL+'/static/bg/rank-right-active.png');
					// transform: rotate(deg);
					background-size: 351rpx 122rpx;
				}
			}
		}

		

		.top {
			position: relative;
			// background-image: url($IMG_URL + '/static/bg/dragonTigerList1.png');
			// background-size: 100% auto;
		}

	}
</style>